<template>
  <div>
    <h1>虚拟长列表</h1>
    <!-- <div class="box">
      <div class="item" v-for="item in list" :key="item.id">
        {{ item.text }}
      </div>
    </div> -->

    <hr />

    <!-- 
      items: 列表数据
      item-size：列表项的高度
      默认插槽内容：放单个列表项的内容
                item - 一个列表项的数据
     -->
    <RecycleScroller class="box" :items="list" :item-size="36">
      <template v-slot:default="{ item }">
        <div class="item">
          {{ item.text }}
        </div>
      </template>
    </RecycleScroller>
  </div>
</template>

<script lang="ts" setup>
import { RecycleScroller } from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'

const list = Array(10000)
  .fill('')
  .map((item, index) => ({
    id: index,
    text: `text_${index}`
  }))
</script>

<style lang="scss" scoped>
.box {
  height: 500px;
  border: 1px solid #000;
  overflow-y: auto;
}

.item {
  height: 36px;
  line-height: 36px;
  padding-left: 16px;
}
</style>
